<template>
  <div>
    <!-- 查看媒体文件 2018/3/7 11:44 zhangQ -->
    <template v-for="item in lookImtList">
      <!--<template v-if="item.type=='img'">-->
        <!--<img :src="item.src" alt="" style="width: 150px;margin: 5px;"/>-->
      <!--</template>-->
      <template v-if="item.type=='video'">
        <img src="../../../../../static/img/video.png" alt="" style="width: 150px;margin: 5px;" @click="palyVideo(item.src)"/>
      </template>
    </template>
    <viewer v-if="imgsList.length>0" :imgsList="imgsList"></viewer>
    <xlinkModal v-model="driverVideoObj.show" title="视频播放" className="vertical-center-modal" width="750px;" id="driverVideoDiv">
      <video width="700px" height="520" controls="controls" class="" id="driverVideo" v-if="driverVideoObj.show">
        <source :src="driverVideoObj.src" type="video/mp4"/>
        网络错误！！
      </video>
    </xlinkModal>
  </div>
</template>

<script>
  import xlinkModal from '@components/modal/xlinkModal'
  import viewer from '@/components/Viewer'

  export default {
    name: 'view-media',
    data () {
      let driverVideoObj = {
        show: false,
        src: ''
      }
      let imgsList = []
      let datas = { driverVideoObj, imgsList }
      return datas
    },
    props: {
      /* 多媒体列表 */
      lookImtList: {
        type: Array,
        default () {
          return []
        }
      }
    },
    computed: {},
    methods: {
      /**
       * TODO(视频播放)
       * @auther zhangQ
       * @date 2018/3/26 16:07
       */
      palyVideo (src) {
        if (src) {
          this.driverVideoObj.src = src
          this.driverVideoObj.show = true
        }
      }
    },
    created () {
    },
    mounted () {
      this.lookImtList.forEach((item) => {
        if (item.type === 'img') {
          this.imgsList.push(item.src)
        }
      })
    },
    components: { xlinkModal, viewer }
  }
</script>

<style>
  #driverVideoDiv video::-webkit-media-controls-enclosure {
    overflow: hidden;
  }

  #driverVideoDiv video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
  }
</style>
